// 获取轮播图元素
const banner = document.querySelector('.swiper-wrapper')
// 获取 搜索引擎下边 bot 元素
const bot = document.querySelector('.bot')
// 获取 cate 元素
const cate = document.querySelector('.cate')

// 获取 anfang 元素
const anfang = document.querySelector('.anfang')
// 获取 area 元素
const cateBox = document.querySelector('.daohang')
// 获取 gengduo 元素
const gengduo = document.querySelector('.gengduo')

// 关于登录
const id = window.localStorage.getItem('id')
const token = window.localStorage.getItem('token')
const onBox = document.querySelector('.on')
const offBox = document.querySelector('.off')

// 登录
if (!id) {
    onBox.classList.remove('active')
    offBox.classList.add('active')
}
const xhr = new XMLHttpRequest()
xhr.open('GET', 'http://localhost:8888/users/info?id=' + id)
xhr.onload = function () {
    const res = JSON.parse(xhr.responseText)
    if (res.code === 401) {
        onBox.classList.remove('active')
        offBox.classList.add('active')
    }
    if (res.code === 1) {
        onBox.firstElementChild.innerText = res.info.nickname
        offBox.classList.remove('active')
        onBox.classList.add('active')
    }
}

xhr.setRequestHeader('authorization', token)
xhr.send()


// 搜索引擎
const inp = document.querySelector('input')
const ulBox = document.querySelector('ul')

// 给 input 绑定 输入事件 
inp.oninput = function () {
    // 获取输入的内容
    const text = inp.value.trim()
    // jsonp
    const script = document.createElement('script')
    script.src = `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=35105,31660,35239,35049,34584,34505,34872,35320,26350,35209,35147,22157&wd=${text}&req=2&csor=1&cb=handler&_=1638241997884`
    document.body.appendChild(script)
    script.remove()
}
function handler(res) {
    if(!res.g){
        ulBox.style.display = 'none'
        return
    }
    let str=''
    res.g.forEach(item =>{
        str +=`
         <li>${item.q}</li>
        `
    })
    ulBox.innerHTML = str
    ulBox.style.display = 'block'
}

// 渲染更多
$.ajax({
    url: 'https://search.mall.360.cn/search/q',
    dataType: 'jsonp',
    data: {
        q: '',
        page: '0'
    },
    success(res) {
        getDuo(res)
    }
})
function getDuo(res) {
    let str = ''
    str += `
    <p class="mo">更多商品</p>
    `
    res.data.list.forEach(item => {
        str += `
            <div class="more" data-id=${item.itemId}>
                    <img src="${item.img}" alt="">
                    <p>${item.title}</p>
                    <div class="price">￥${item.stock}</div>
            </div>
        `
    })
    gengduo.innerHTML = str
}

// 渲染中间
$.ajax({
    url: '/dd',
    dataType: 'json',
    success(res) {
        console.log(res)
        getXuan(res)
    }
})
function getXuan(res) {
    let name = ""
    let url = ""
    let str = ''
    res.data.floors.forEach((items, index) => {
        if (index >= 4 && index <= 15) {
            if (index % 2 == 0) {
                name = items.name
                url = items.data.poster.pic
                str += `
                    <div class="top">
                        <p>${name}</p>
                        <span>全部 >></span>
                    </div>
                    <ol class="cen-o" >
                        <li>
                            <img src="${url}" alt="">
                        </li>
                    `
                items.data.list.forEach(item => {
                    str += `
                        <li data-id=${item.itemId}>
                        `
                    if (item.label != "") {
                        str += `
                            <div class="frist">${item.label}</div>
                            <div class="frist1">${item.label}</div>
                            `
                    }
                    str += `
                            <img class="small" src=${item.img}>
                            <div class="name">${item.title}</div>
                            <div class="desc">${item.desc}</div>
                            <div class="price">
                                <p class="yuan">￥${item.currentPrice}</p>
                                <p class="no">￥${item.originPrice}</p>
                            </div>
                        </li>
                        `
                })
            }
            else {
                str += `
                </ol>
                <img class="botte" src=${items.data.pic} title=${items.data.title}>
            `
            }
        }
        index++
    })
    anfang.innerHTML = str
}

// 轮播图
// $.ajax({
//     url: '/dd',
//     dataType: 'json',
//     success(res) {
//         console.log(res)
//         run(res)
//     }
// })
// function run(res) {
//     let str = ''

//     res.data.frames.banner.list.forEach(function (items) {
//         str += `
//         <div class="swiper-slide">
//             <img src="${items.pic}" alt="">
//         </div>
//         `
//     })
//     banner.innerHTML = str
// }

// bot
$.ajax({
    url: '/dd',
    dataType: 'json',
    success(res) {
        console.log(res)
        getBox(res)
    }
})
function getBox(res) {
    let str = ''
    res.data.frames.search.suggests.forEach(function (items) {
        str += `
        <li><a href='${items.url}'>${items.text}</a></li>
        `
    })
    bot.innerHTML = str
}

// cate 二级菜单
$.ajax({
    url: '/dt',
    dataType: 'json',
    success(res) {
        console.log(res)
        getList(res)
    }
})

function getList(res) {
    let str = ''
    res.data.category.forEach(function (items) {
        str += `
        <li class='ca-1' data-id="${items.id}"><a href="${items.url}">${items.name}</a></li>
        `
    })
    cate.innerHTML = str
    console.log(cate)
}
// 二级菜单
const nav = document.querySelector('.swiper > .nav')
cate.onmouseover=function (e) {
    nav.style.display = 'flex'
    const id = e.target.dataset.id
    console.log(id)
    // 获取数据
    $.ajax({
        url: '/dy',
        data: `type=pc_index_category&id=${id}`,
        dataType: 'json',
        success(res) {
            console.log(res)
            getNav(res)
        }
    })
    
}
// 添加移出事件
cate.onmouseout = function () {
    nav.style.display='none'
}
    function getNav(res) {
        let str = ''
        res.data.secondary.forEach(function (item) {
            str += `
                <a href="${item.url}">
                    <img src="${item.pic}" alt="">
                    <span>${item.name}</span>
                </a>
            `
        })
        nav.innerHTML = str
    }




// 楼层导航
$('.show > li').click(function () {
    // 拿到我自己的索引
    const index = $(this).index()
    console.log(index)
    const li = $('.area').find('ol').eq(index)
    $('html,body').animate({ scrollTop: li.offset().top-80}, 500)
})
// 滚动事件
$(window).scroll(() => {
    // 拿到浏览器卷去的高度
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop

    // 楼层导航栏
    $('.anfang >.top').each(function (index, item) {
        if (scrollTop >= $(item).offset().top + 40) {
            $('.show > li').eq(index-7).addClass('active').siblings().removeClass('active')
        }
    })
    scrollTop >= 600 ? $('.show').fadeIn(500) : $('.show').fadeOut(500)

    // 回到顶部
    scrollTop >= 300 ? $('.last').fadeIn(500) : $('.last').fadeOut(500)

})
// 添加点击事件使其回到顶部
$('.last').click(() => {
    window.scrollTo({ top: 0, behavior: 'smooth' })
    $('html,body').animate({ scrollTop: 0 }, 1000)
})

// 给 ccc 添加点击事件
// $('.ccc').click(function () {
//     $('html,body').animate({ scrollTop: $('.mo').offset()}, 500)
// })
// 渲染 中间
anfang.addEventListener('click', e => {
    if (e.target.nodeName === 'LI') {
        const goodsId = e.target.dataset.id
        console.log(goodsId)
        window.sessionStorage.setItem('goodsId', goodsId)
        // 跳转到详情页面
        window.location.href = './xiangqing.html'
    }
})

// 渲染更多
gengduo.addEventListener('click', e => {
    if (e.target.nodeName === 'DIV') {
        const goodsId = e.target.dataset.id
        window.sessionStorage.setItem('goodsId', goodsId)

        // 跳转到详情页面
        window.location.href = './xiangqing.html'
    }
})

